<script>
import { UserFilled } from '@element-plus/icons-vue'
import { routes } from '../router/index'

export default {
  name: 'AsideCom',
  data () {
    return {
      routes: routes[0].children
    }
  },
  mounted () {
  },
  props: ['collapse'],
  components: { UserFilled }
}
</script>
<template>
  <!-- router 标记当前侧边栏可以点击进行路由跳转，跳转的路径通过 index 配置 -->
  <el-menu router :collapse="collapse" active-text-color="#ffd04b" background-color="#545c64"
    class="el-menu-vertical-demo" default-active="2" text-color="#fff">

    <el-menu-item>首页</el-menu-item>


    <el-sub-menu v-for="item in routes" :key="item.path" :index="'/' + item.path">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>{{ item.label }}</span>
      </template>
      <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">
        {{ child.label }}
      </el-menu-item>
      <!-- sad手打 -->
      <!-- <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item> -->
      <!-- <el-menu-item index="/manager/userlist">用户列表</el-menu-item> -->
    </el-sub-menu>

    <!-- <el-sub-menu index="/manager">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>账号管理</span>
      </template>
      <el-menu-item index="/manager/managerlist">管理员列表</el-menu-item>
      <el-menu-item index="/manager/userlist">用户列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/banner">
      <template #title>
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>轮播图管理</span>
      </template>
      <el-menu-item index="/banner/bannerlist">轮播图列表</el-menu-item>
      <el-menu-item index="/banner/addbanner">添加轮播图</el-menu-item>
    </el-sub-menu> -->

  </el-menu>
</template>
